<template>
    <div class="easyd-weixin-Box">
        <div class="shopDetailimageBox">
            <div class="shopDetailimageContent">
                <img :src="testData.img" v-lazy="testData.img" v-gallery />
            </div>
        </div>
        <div class="shopDetailTitle">
            {{testData.name}}
        </div>
        <div class="shopDetailDesc">
            {{testData.desc}}
        </div>
        <div class="shopDetailPriceAndCount">
            <div class="shopDetailPrice">¥{{testData.newPrice}}&nbsp;<span v-if="testData.oldPrice > 0">¥{{testData.oldPrice}}</span></div>
            <div class="shopDetailCount">浏览数：99次</div>
        </div>
        <div class="shopDetailConcernBox">
            <div class="shopDetailConcern">关注商品</div>
        </div>
        <div class="shopDetailContent">
            <div class="shopDetailContentTitle">商品详情</div>
            

            <template v-for="item in testData.shopDetail">
                <template v-if="item.type == 0">
                    <div class="shopDetailContentItem shopDetailContentText">
                        {{item.content}}
                    </div>
                </template>
                <template v-if="item.type == 1">
                    <div class="shopDetailContentItem shopDetailContentImage">
                        <img :src="item.content" v-lazy="item.content">
                    </div>
                </template>
            </template>
            <!-- <div class="shopDetailContentItem shopDetailContentText">
                我是描述信息我是描述信息我是描述信息我是描述信息我
                是描述信息我是描述信息我是描述信息我是描述信息我是描述
                信息我是描述信息我是描述信息
            </div>
            <div class="shopDetailContentItem shopDetailContentImage">
                <img src="~BUSSINESS_IMAGE/images/IMG_2913.jpg" />
            </div>
            <div class="shopDetailContentItem shopDetailContentImage">
                <img src="~BUSSINESS_IMAGE/images/hengtu.png" />
            </div>
            <div class="shopDetailContentItem shopDetailContentText">
                我是描述信息我是描述信息我是描述信息我是描述信息我
                是描述信息我是描述信息我是描述信息我是描述信息我是描述
                信息我是描述信息我是描述信息
            </div>
            <div class="shopDetailContentItem shopDetailContentText">
                我是描述信息我是描述信息我是描述信息我是描述信息我
                是描述信息我是描述信息我是描述信息我是描述信息我是描述
                信息我是描述信息我是描述信息
            </div>
            <div class="shopDetailContentItem shopDetailContentText">
                我是描述信息我是描述信息我是描述信息我是描述信息我
                是描述信息我是描述信息我是描述信息我是描述信息我是描述
                信息我是描述信息我是描述信息
            </div>
            <div class="shopDetailContentItem shopDetailContentImage">
                <img src="~BUSSINESS_IMAGE/images/hengtu.png" />
            </div> -->
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return {
            testData : {
                name  : '良品铺子-猪肉脯自然片零食100g休闲零食小吃',
                img   : './static/images/shangpin1.jpg',
                desc  : '吃芒果和芒果干，从来就不是一回事，芒果干的原料，取得必须是硕大肉厚的芒果精华，经高低温烘焙，锁住鲜芒风味，才称得上好芒果干',
                newPrice : '19.9',
                oldPrice : '200',
                isPreferential : true,
                shopDetail : [
                    {
                        type : 1,
                        content : './static/images/shangpinxiangqing1.jpg'
                    },
                    {
                        type : 1,
                        content : './static/images/shangpinxiangqing2.jpg'
                    },
                    {
                        type : 1,
                        content : './static/images/shangpinxiangqing3.jpg'
                    },
                    {
                        type : 1,
                        content : './static/images/shangpinxiangqing4.jpg'
                    },
                    {
                        type : 1,
                        content : './static/images/shangpinxiangqing5.jpg'
                    },
                    {
                        type : 1,
                        content : './static/images/shangpinxiangqing6.jpg'
                    },
                    {
                        type : 1,
                        content : './static/images/shangpinxiangqing7.jpg'
                    },
                    {
                        type : 1,
                        content : './static/images/shangpinxiangqing8.jpg'
                    }
                ]
            }
        }
    }
}
</script>

<style lang="stylus" scoped>
.shopDetailimageBox {
    width 100%
    height 300px
    padding-left 15px
    padding-right 15px
    box-sizing border-box
    margin-top 15px

    .shopDetailimageContent {
        width 100%
        height 100%
        background #fff
        border-radius 5px
        box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.05);

        img {
            width 100%
            height 100%
            border-radius 5px
            object-fit cover
        }
    }
}

.shopDetailTitle {
    width 100%
    height auto
    padding-left 15px
    padding-right 15px
    box-sizing border-box
    text-align justify
    padding-top 10px
    font-weight 500
    padding-bottom 10px
}

.shopDetailDesc{
    width 100%
    height auto
    line-height 22px
    font-size 12px
    padding-left 15px
    padding-right 15px
    box-sizing border-box
    text-align justify
    padding-bottom 10px    
}

.shopDetailPriceAndCount {
    width 100%
    height 20px
    padding-left 15px
    padding-right 15px
    box-sizing border-box 
    line-height 20px

    .shopDetailPrice {
        float left    
        font-weight 500
        letter-spacing 1px
        color orange
        font-size 18px

        span {
            font-size 12px
            text-decoration line-through
            float right
            color #999
            margin-top 2px
            margin-left 5px
        }
    }

    .shopDetailCount {
        float right  
        color #999  
    }
}

.shopDetailConcernBox {
    padding-left 15px
    padding-right 15px
    margin-top 10px
    border-bottom 1px solid #eee
    padding-bottom 30px
    box-sizing border-box 

    .shopDetailConcern {
        width: 100%;
        height: 45px;
        background: #FDDE6E;
        line-height: 45px;
        text-align: center;
        margin-top: 5px;
        color: #666;
        box-sizing border-box 
        font-weight: 500;
        letter-spacing: 1px;
        border-radius: 5px;
    }
}

.shopDetailContent {
    width 100%
    height auto
    font-size 12px
    padding 15px
    background #fff
    box-sizing border-box 

    .shopDetailContentTitle {
        width 100%
        height 50px;
        line-height 50px
        font-size 16px
        font-weight 500
        text-align center
        margin-bottom 10px
    }

    .shopDetailContentItem {
       
    }

    .shopDetailContentText {
        width 100%
        line-height 22px
        height auto    
    }
    
    .shopDetailContentImage {
        width 100%
        height auto 

        img {
            width 100%
            height auto
            margin-top -4px
        }   
    }
}


</style>

